﻿<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>ProClinic-医院管理系统Bootstrap4前端框架</title>
	<!-- Fav  Icon Link -->
	<link rel="shortcut icon" type="image/png" href="images/fav.png">
	<!-- Bootstrap core CSS -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<!-- themify icons CSS -->
	<link rel="stylesheet" href="css/themify-icons.css">
	<!-- Animations CSS -->
	<link rel="stylesheet" href="css/animate.css">
	<!-- Main CSS -->
	<link rel="stylesheet" href="css/styles.css">
	<link rel="stylesheet" href="css/green.css" id="style_theme">
	<link rel="stylesheet" href="css/responsive.css">

	<script src="js/modernizr.min.js"></script>
</head>

<body>
	<!-- Pre Loader -->
	<div class="loading">
		<div class="spinner">
			<div class="double-bounce1"></div>
			<div class="double-bounce2"></div>
		</div>
	</div>
	<!--/Pre Loader -->
	<!-- Color Changer -->
	<div class="theme-settings" id="switcher">
		<span class="theme-click">
			<span class="ti-settings"></span>
		</span>
		<span class="theme-color theme-default theme-active" data-color="green"></span>
		<span class="theme-color theme-blue" data-color="blue"></span>
		<span class="theme-color theme-red" data-color="red"></span>
		<span class="theme-color theme-violet" data-color="violet"></span>
		<span class="theme-color theme-yellow" data-color="yellow"></span>
	</div>
	<!-- /Color Changer -->
	<div class="wrapper">
		<!-- Page Content -->
		<div id="content">
				<!-- Top Navigation -->
				<div class="container top-brand">
					<nav class="navbar navbar-default">			
						<div class="navbar-header">
							<div class="sidebar-header"> <a href="index.html"><img src="images/logo-dark.png" class="logo" alt="logo"></a>
							</div>
						</div>
						<ul class="nav justify-content-end">
							<li class="nav-item">
								<a class="nav-link">
									<span title="Fullscreen" class="ti-fullscreen fullscreen"></span>
								</a>							
							</li>
							<li class="nav-item">
								<a class="nav-link" data-toggle="modal" data-target=".lochana-modal-lg">
									<span class="ti-search"></span>
								</a>
								<div class="modal fade lochana-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
									<div class="modal-dialog modal-lorvens">
										<div class="modal-content lochana-box-shadow2">
											<div class="modal-header">
												<h5 class="modal-title">Search Patient/医生:</h5>
												<span class="ti-close" data-dismiss="modal" aria-label="Close">
												</span>
											</div>
											<div class="modal-body">
												<form>
													<div class="form-group">
														<input type="text" class="form-control" id="search-term" placeholder="Type text here">
														<button type="button" class="btn btn-lorvens lochana-bg">
															<span class="ti-location-arrow"></span> Search</button>
													</div>
												</form>
											</div>
										</div>
									</div>
								</div>
							</li>
							<li class="nav-item">
								<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
								 aria-expanded="false">
									<span class="ti-announcement"></span>
								</a>
								<div class="dropdown-menu lochana-box-shadow2 notifications animated flipInY">
									<h5>Notifications</h5>
									<a class="dropdown-item" href="#">
										<span class="ti-wheelchair"></span> New Patient Added</a>
									<a class="dropdown-item" href="#">
										<span class="ti-money"></span> Patient payment done</a>
									<a class="dropdown-item" href="#">
										<span class="ti-time"></span>Patient Appointment booked</a>
									<a class="dropdown-item" href="#">
										<span class="ti-wheelchair"></span> New Patient Added</a>
								</div>
							</li>
							<li class="nav-item">
								<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
								 aria-expanded="false">
									<span class="ti-user"></span>
								</a>
								<div class="dropdown-menu lochana-box-shadow2 profile animated flipInY">
									<h5>John Willing</h5>
									<a class="dropdown-item" href="#">
										<span class="ti-settings"></span> Settings</a>
									<a class="dropdown-item" href="#">
										<span class="ti-help-alt"></span> Help</a>
									<a class="dropdown-item" href="#">
										<span class="ti-power-off"></span> Logout</a>
								</div>
							</li>
						</ul>
				
					</nav>
				</div>
				<!-- /Top Navigation -->
				<!-- Menu -->
				<div class="container menu-nav">
					<nav class="navbar navbar-expand-lg lochana-bg text-white">
						<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
						 aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
							<span class="ti-menu text-white"></span>
						</button>
				
						<div class="collapse navbar-collapse" id="navbarSupportedContent">
							<ul class="navbar-nav mr-auto">
								<li class="nav-item dropdown">
									<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
									 aria-expanded="false"><span class="ti-home"></span> 控制面板</a>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="index.html">默认</a>
									</div>
								</li>
								<li class="nav-item dropdown">
									<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
									 aria-expanded="false"><span class="ti-wheelchair"></span> 病人管理</a>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="add-patient.html">添加病人信息</a>
										<a class="dropdown-item" href="patients.html">查看病人信息</a>
										<a class="dropdown-item" href="about-patient.html">病人详情</a>
										<a class="dropdown-item" href="edit-patient.html">编辑病人信息</a>
									</div>
								</li>
								<li class="nav-item dropdown">
									<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
									 aria-expanded="false"><span class="ti-user"></span> 医生管理</a>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="add-doctor.html">添加医生信息</a>
										<a class="dropdown-item" href="doctors.html">查询医生信息</a>
										<a class="dropdown-item" href="about-doctor.html">医生信息详情</a>
										<a class="dropdown-item" href="edit-doctor.html">编辑医生信息</a>
									</div>
								</li>
								<li class="nav-item dropdown">
									<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
									 aria-expanded="false"><span class="ti-pencil-alt"></span> 出诊管理</a>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="add-appointment.html">添加出诊信息</a>
										<a class="dropdown-item" href="appointments.html">查询出诊信息</a>
										<a class="dropdown-item" href="about-appointment.html">出诊信息详情</a>
										<a class="dropdown-item" href="edit-appointment.html">编辑出诊信息</a>
									</div>
								</li>
								<li class="nav-item dropdown">
									<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
									 aria-expanded="false"><span class="ti-money"></span> 支付管理</a>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="add-payment.html">添加支付</a>
										<a class="dropdown-item" href="payments.html">所有支付</a>
										<a class="dropdown-item" href="about-payment.html">发票</a>
									</div>
								</li>
								<li class="nav-item dropdown">
									<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
									 aria-expanded="false"><span class="ti-key"></span> 病房分配</a>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="add-room.html">添加病房</a>
										<a class="dropdown-item" href="rooms.html">查询病房</a>
										<a class="dropdown-item" href="edit-room.html">编辑病房信息</a>
									</div>
								</li>
								<li class="nav-item dropdown active">
									<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
									 aria-expanded="false"><span class="ti-layout-tab"></span> UI框架</a>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="typography.html">排版</a>
										<a class="dropdown-item" href="buttons.html">按钮</a>
										<a class="dropdown-item" href="cards.html">卡片</a>
										<a class="dropdown-item" href="tabs.html">选项卡</a>
										<a class="dropdown-item" href="accordions.html">手风琴</a>
										<a class="dropdown-item" href="modals.html">模态窗口</a>
										<a class="dropdown-item" href="lists.html">媒体和列表</a>
										<a class="dropdown-item" href="grid.html">网格</a>
										<a class="dropdown-item" href="progress-bars.html">进度条</a>
										<a class="dropdown-item" href="notifications-alerts.html">预警和提示</a>
										<a class="dropdown-item" href="pagination.html">分页</a>
										<a class="dropdown-item" href="carousel.html">滑块</a>
										<a class="dropdown-item" href="tables.html">表格</a>
										<a class="dropdown-item" href="charts-1.html">Morris图表</a>
										<a class="dropdown-item" href="charts-2.html">Flot图表</a>
										<a class="dropdown-item" href="map-1.html">谷歌地图</a>
										<a class="dropdown-item" href="map-2.html">Vector地图</a>
										<a class="dropdown-item" href="forms.html">表单</a>
										<a class="dropdown-item" href="font-awesome.html">Font Awesome </a>
										<a class="dropdown-item" href="themify.html">Themify图标</a>
									</div>
								</li>
								<li class="nav-item dropdown">
									<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
									 aria-expanded="false"><span class="ti-file"></span> 其它页面</a>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="login.html">登录</a>
										<a class="dropdown-item" href="sign-up.html">注册</a>
										<a class="dropdown-item" href="404.html">404</a>
										<a class="dropdown-item" href="blank-page.html">空白页</a>
										<a class="dropdown-item" href="pricing.html">价格表</a>
										<a class="dropdown-item" href="faq.html">FAQ</a>
										<a class="dropdown-item" href="invoice.html">发票</a>
									</div>
								</li>
							</ul>
						</div>
					</nav>
				</div>
				<!-- /Menu -->
				<!-- Breadcrumb -->
				<!-- Page Title -->
				<div class="container mt-0">
					<div class="row breadcrumb-bar">
				<div class="col-md-6">
					<h3 class="block-title">Tabs</h3>
				</div>
				<div class="col-md-6">
					<ol class="breadcrumb">
						<li class="breadcrumb-item">
							<a href="index.html">
								<span class="ti-home"></span>
							</a>
						</li>
						<li class="breadcrumb-item">UI Kit</li>
						<li class="breadcrumb-item active">Tabs</li>
					</ol>
				</div>
			</div>
			</div>
			<!-- /Breadcrumb -->
			<!-- Main Content -->
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div class="widget-area-2 lochana-box-shadow">
							<!-- Tabs Area -->
							<h3 class="widget-title">Tabs</h3>
							<p class="margin-l20">Just add <code>class="nav nav-tabs"</code> to any <code>&lt;ul&gt;</code>. Add <code>class="nav-item"</code> to <code>&lt;li&gt;</code>. Add <code>class="nav-link"</code> to <code>&lt;a&gt;</code>.</p>
							<div class="lochana-widget">
								<div class="bd-example bd-example-tabs">
									<ul class="nav nav-tabs" id="myTab" role="tablist">
										<li class="nav-item">
											<a class="nav-link" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="false">Home</a>
										</li>
										<li class="nav-item">
											<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
										</li>
										<li class="nav-item">
											<a class="nav-link active show" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="true">Contact</a>
										</li>
									</ul>
									<div class="tab-content" id="myTabContent">
										<div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
											<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master
												cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher
												synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan
												aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
										</div>
										<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
											<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore
												velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui
												photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo
												nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna
												velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard
												ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente
												accusamus tattooed echo park.</p>
										</div>
										<div class="tab-pane fade active show" id="contact" role="tabpanel" aria-labelledby="contact-tab">
											<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack
												lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore
												carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.
												Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester
												cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray
												yr.</p>
										</div>
									</div>
								</div>
							</div>
							<!-- /Tabs Area -->
							</div>
							<div class="widget-area-2 lochana-box-shadow">
							<!-- Pills Area -->
							<h3 class="widget-title">Pills</h3>
							<p class="margin-l20">Just add <code>class="nav nav-pills"</code> to any <code>&lt;ul&gt;</code>. Add <code>class="nav-item"</code> to <code>&lt;li&gt;</code>. Add <code>class="nav-link"</code> to <code>&lt;a&gt;</code>. Add <code>class="nav-link disabled"</code> to <code>&lt;a&gt;</code>  to get link disabled.</p>
							<div class="lochana-widget">
								<ul class="nav nav-pills">
									<li class="nav-item">
										<a class="nav-link active" href="#">Active</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#">Link</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#">Link</a>
									</li>
									<li class="nav-item">
										<a class="nav-link disabled" href="#">Disabled</a>
									</li>
								</ul>
							</div>
							<!-- /Pills Area -->
							</div>
							<div class="widget-area-2 lochana-box-shadow">
							<!-- utilities Area -->
							<h3 class="widget-title">Working with flex utilities</h3>
							<p class="margin-l20">Just add <code>class="nav nav-pills flex-column"</code> to any <code>&lt;ul&gt;</code>. Add <code>class="nav-item"</code> to <code>&lt;li&gt;</code>. Add <code>class="nav-link"</code> to <code>&lt;a&gt;</code>. Add <code>class="nav-link disabled"</code> to <code>&lt;a&gt;</code>  to get link disabled.</p>
							<div class="lochana-widget">
								<nav class="nav nav-pills flex-column flex-sm-row">
									<a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
									<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
									<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
									<a class="flex-sm-fill text-sm-center nav-link disabled" href="#">Disabled</a>
								</nav>
							</div>
							<!-- /utilities Area -->
							</div>
							<div class="widget-area-2 lochana-box-shadow">
							<!-- Tabs with dropdowns  Area -->
							<h3 class="widget-title">Tabs with dropdowns</h3>
							<p class="margin-l20">Just add <code>class="nav nav-tabs"</code> to any <code>&lt;ul&gt;</code>. Add <code>class="nav-item dropdown"</code> to <code>&lt;li&gt;</code>.</p>
							<div class="lochana-widget">
								<ul class="nav nav-tabs">
									<li class="nav-item">
										<a class="nav-link active" href="#">Active</a>
									</li>
									<li class="nav-item dropdown">
										<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
										<div class="dropdown-menu">
											<a class="dropdown-item" href="#">Action</a>
											<a class="dropdown-item" href="#">Another action</a>
											<a class="dropdown-item" href="#">Something else here</a>
											<div class="dropdown-divider"></div>
											<a class="dropdown-item" href="#">Separated link</a>
										</div>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#">Link</a>
									</li>
									<li class="nav-item">
										<a class="nav-link disabled" href="#">Disabled</a>
									</li>
								</ul>
							</div>
							<!-- /Tabs with dropdowns  Area -->
							</div>
							<div class="widget-area-2 lochana-box-shadow">
							<!-- Pills with dropdowns Area -->
							<h3 class="widget-title">Pills with dropdowns</h3>
							<p class="margin-l20">Just add <code>class="nav nav-pills"</code> to any <code>&lt;ul&gt;</code>. Add <code>class="nav-item dropdown"</code> to <code>&lt;li&gt;</code>.</p>
							<div class="lochana-widget mb-3">
								<ul class="nav nav-pills">
									<li class="nav-item">
										<a class="nav-link active" href="#">Active</a>
									</li>
									<li class="nav-item dropdown">
										<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
										<div class="dropdown-menu">
											<a class="dropdown-item" href="#">Action</a>
											<a class="dropdown-item" href="#">Another action</a>
											<a class="dropdown-item" href="#">Something else here</a>
											<div class="dropdown-divider"></div>
											<a class="dropdown-item" href="#">Separated link</a>
										</div>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#">Link</a>
									</li>
									<li class="nav-item">
										<a class="nav-link disabled" href="#">Disabled</a>
									</li>
								</ul>
							</div>
							<!-- /Pills with dropdowns Area -->
							
						</div>
					</div>	
				</div>	
			</div>
			<!-- /Main Content -->
			<!--Copy Rights-->
			<div class="container">
				<div class="d-sm-flex justify-content-center">
				  <span class="text-muted text-center d-block d-sm-inline-block">Copyright © 2020. All rights reserved.</span>
				</div>
			</div>
			<!-- /Copy Rights-->
		</div>
		<!-- /Page Content -->
	</div>
	<!-- Back to Top -->
	<a id="back-to-top" href="#" class="back-to-top">
			<span class="ti-angle-up"></span>
	</a>
	<!-- /Back to Top -->
	<!-- Jquery Library-->
	<script src="js/jquery-3.2.1.min.js"></script>
	<!-- Popper Library-->
	<script src="js/popper.min.js"></script>
	<!-- Bootstrap Library-->
	<script src="js/bootstrap.min.js"></script>
	<!-- Custom Script-->
	<script src="js/custom.js"></script>
</body>

</html>